<template>
  <Modal class="balance-modal" v-model="modal" title="查看明细" width="1500" fullscreen footer-hide :mask-closable="false" style="margin-bottom:0">
    <!-- <div class="container-header title" slot="header">
      <div class="fl header-name">查看明细</div>
      <div class="fr header-close" @click="onCancel">X</div>
    </div> -->
    <div slot="header" class="between">
      <p>查看明细</p>
      <p class="detail-total">小计：共{{total}}条记录，{{storeQuantity}}家门店、{{couponQuantity}}种优惠券、优惠券总金额¥{{discountTotalAmount}}</p>
    </div>
    <Form :model="form" :label-width="100" ref="form">
      <Row>
        <Col span="5">
          <FormItem label="门店">
            <Input v-model="listDet.form.storeName" placeholder="门店" @on-enter="onSearchBtnClick"/>
          </FormItem>
        </Col>
        <Col span="5">
          <FormItem label="券名">
            <Input v-model="listDet.form.couponName" placeholder="券名" @on-enter="onSearchBtnClick"/>
          </FormItem>
        </Col>
        <Col span="5">
          <FormItem label="单号">
            <Input v-model="listDet.form.useOrderSn" placeholder="单号" @on-enter="onSearchBtnClick"/>
          </FormItem>
        </Col>
        <Col span="2" class-name="search small" offset="1">
          <Button class="btn-search" type="primary" icon="ios-search" @click="onSearchBtnClick"></Button>
        </Col>
        <Col span="3" v-if="settlementStatus == 'PENDING_SETTLEMENT'">
          <Button
            size="large"
            class="item ml"
            type="primary"
            icon="md-cloud-download"
            @click="onBalance">确认结算</Button>
        </Col>
        <Col span="3">
          <export-btn @onExport="onExport" class="item ml"></export-btn>
        </Col>
      </Row>
      <Loader :status="form.status"></Loader>
    </Form>
    <Table
      :height="options.tableHeight"
      stripe
      :columns="listDet.columns"
      :data="listDet.data"
      no-data-text="亲，没有找到相关记录哦！~"></Table>
    <div class="pager">
      <Page
        :total="listDet.totalItem"
        :current="listDet.currentPage"
        :page-size="listDet.pageSize"
        @on-change="onPageChange"
        @on-page-size-change="onPageSizeChange"
        show-sizer
        placement="top"></Page>
    </div>
    <Loader :status="listDet.status" @refresh="getData"></Loader>
    <BalanceSure ref="balanceSure" @complete="getData"></BalanceSure>
  </Modal>
</template>
<script>
import { formatDate, clearEmpty } from '@/util'
import table from '@/table'
import BalanceDetailtData from './BalanceDetailtData'
import BalanceSure from './BalanceSure'
export default {
  components: {
    BalanceSure
  },
  data () {
    return {
      id: '',
      useMonth: '',
      total: null,
      storeQuantity: null,
      couponQuantity: null,
      discountTotalAmount: null,
      settlementStatus: null,
      modal: false,
      item: null,
      form: {
        sum: null,
        description: null,
        status: 'pass',
        deDisabled: false
      },
      listDet: BalanceDetailtData,
      options: {
        tableHeight: 300
      }
    }
  },
  destroyed() {
    this.$bus.$off()
  },
  mounted() {
    this.initTable(-50)
    this.listDet.currentPage = ~~this.$route.query.currentPage || 1
    this.listDet.pageSize = ~~this.$route.query.pageSize || this.listDet.pageSize
    this.listDet.currentPage = 1
    // this.getData()
  },
  destroyed() {
    this.$bus.$off()
  },
  methods: {
    ...table,
    onSearchBtnClick() {
      this.listDet.currentPage = 1
      this.getData()
    },
    openModal() {
      this.modal = true
    },
    closeModal() {
      this.modal = false
    },
    resetForm() {
      this.$refs.form.resetFields()
      this.id = ''
      this.form.description = null
      this.form.sum = null
      this.form.deDisabled = false
    },
    updateForm(item) {
      this.resetForm()
      this.id = item.distributorId
      this.settlementStatus = item.settlementStatus
      // this.useMonth = item.settleMonth.toString().substring(0, 4) + '-' + item.settleMonth.toString().substring(4, 6)
      this.useMonth = item.settleMonth
      this.getData()
      this.openModal()
      this.item = item
    },
    onCancel() {
      this.modal = false
      this.resetForm()
      // this.$router.push({
      //   name: 'sales/balance/list'
      // })
    },
    getData() {
      let param = {
        current: this.listDet.currentPage,
        size: this.listDet.pageSize,
        deliveryDistributorId: this.id,
        // status: 12,
        useMonth: this.useMonth,
        // isSettle: true,
        storeName: this.listDet.form.storeName,
        couponName: this.listDet.form.couponName,
        useOrderSn: this.listDet.form.useOrderSn
      }
      this.listDet.status = 'loading'
      this.$ajaxGet('/coupon/coupon_settlement/es_item_page', param).then(data => {
        this.listDet.data = (data.records || []).map(item => {
          return {
            useDate: item.useDate,
            storeName: item.storeName,
            couponName: item.couponName,
            useOrderSn: item.useOrderSn,
            useOrderAmount: item.useOrderAmount,
            remark: item.remark ? item.remark : '-',
            discountAmount: item.discountAmount,
            storeContactName : item.storeContactName ? item.storeContactName : '-',
            storeMobile: item.storeMobile ? item.storeMobile : '-'
          }
        })
        this.total = data.total
        this.storeQuantity = data.storeQuantity ? data.storeQuantity : '0'
        this.couponQuantity = data.couponQuantity ? data.couponQuantity : '0'
        this.discountTotalAmount = data.discountTotalAmount ? data.discountTotalAmount : '0'
        this.listDet.totalItem = Number(data.total)
        this.backTableTop()
        this.listDet.status = 'pass'
      }).catch(() => {
        this.listDet.status = 'error'
      })
    },
    onExport() {
      let param = {
        current: this.listDet.currentPage,
        size: this.listDet.pageSize,
        deliveryDistributorId: this.id,
        // status: 12,
        useMonth: this.useMonth,
        // isSettle: true,
        storeName: this.listDet.form.storeName,
        couponName: this.listDet.form.couponName,
        useOrderSn: this.listDet.form.useOrderSn
      }
      this.$ajaxPost('/coupon/coupon_settlement/settle_item_export', param).then(() => {})
      this.$Modal.confirm({
        title: '提示',
        content: '跳转到导出列表页面？',
        onOk: () => {
          this.$router.push('/home/export/list')
        }
      })
    },
    onBalance(item) {
      this.$refs.balanceSure.updateForm(this.item)
      this.closeModal()
    },
    onPageChange(number) {
      this.listDet.currentPage = number
      // this.$router.push({
      //   query: {
      //     currentPage: this.listDet.currentPage,
      //     pageSize: this.listDet.pageSize
      //   }
      // })
      this.getData()
    },
    onPageSizeChange(pageSize) {
      this.listDet.currentPage = 1
      this.listDet.pageSize = pageSize
      // this.$router.push({
      //   query: {
      //     currentPage: this.listDet.currentPage,
      //     pageSize: this.listDet.pageSize
      //   }
      // })
      this.getData()
    }
  }
}
</script>